<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <link rel="stylesheet" href="../css/bootstrap-table.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script src="../js/bootstrap-table.min.js"></script>
    <script src="../js/bootstrap-table-zh-CN.min.js"></script>
    <style>
        .chang{
            width: 40%;
            display: inline-block;
            text-align:right;
        }
        .dchang{
            width: 50%;
            display: inline-block;
        }
        .aa{
            display: inline-block;
            width: 50%;
        }
        .dropdownbox{
            width: 60%;
        }
        .ichang{
            width: 60%;
        }
        .d{
            margin-top: 3px;
        }
    </style>
</head>
<body>

<button onclick="show()" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="margin-left: 1000px" >产品档案登记</button>
<hr/>
<!-- 模态框 -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-xl" >
        <div class="modal-content" >

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h5 class="modal-title">产品登记</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body ">
                <div style="display: flex; flex-direction: column" id="qingkong">
                    <!--主要信息-->
                    <div style="margin-top: 5px;" id="zy">
                        <div class="bg-info text-white" style="padding-left: 20px; height:25px;">主信息</div>
                        <!--                        <span id="q_productId" style="background-color: rgba(195, 195, 195, 0.61);float:left;width:80%;border-bottom: 1px solid white">s</span>-->
                        <div>
                            <div style="width: 50%; float: left;"><span style="background-color:deepskyblue;width: 40%;float: left;"><span style="color: red">*</span>产品名称</span><input  type="text" style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;" id="add1"></div>
                            <div style="width: 50%; float: left;"><span style="background-color:deepskyblue;width: 40%;float: left;">制造商</span><input r type="text" style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;" id="add2"></div>
                        </div>
                        <div>
                            <div style="width: 50%; float: left;"><span style="background-color:deepskyblue;width: 40%;float: left;"><span style="color: red">*</span>一级分类</span><select  id="add3" style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;" >
                                <option value="">请选择</option>
                                <option value="1">电子</option>
                            </select></div>
                            <div style="width: 50%; float: left;"><span style="background-color:deepskyblue;width: 40%;float: left;"><span style="color: red">*</span>二级分类</span><select id="add4" style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;"  >
                                <option value="">请选择</option>
                                <option value="1">计算机</option>
                            </select></div>
                        </div>
                        <div>
                            <div style="width: 50%; float: left;"><span style="background-color:deepskyblue;width: 40%;float: left;"><span style="color: red">*</span>三级分类</span><select id="add5" style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;"  >
                                <option value="">请选择</option>
                                <option value="1">服务器</option>
                            </select></div>
                            <div style="width: 50%; float: left;"><span style="background-color:deepskyblue;width: 40%;float: left;">产品简称</span><input  type="text" style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;" id="add6"></div>
                        </div>
                        <div>
                            <div style="width: 50%; float: left;"><span style="background-color:deepskyblue;width: 40%;float: left;">用途类型</span><select id="add7"  style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;">
                                <option value="">请选择</option>
                                <option value="y001-1">商品</option>
                                <option value="y001-2">物料</option>
                            </select></div>
                            <div style="width: 50%; float: left;"><span style="background-color:deepskyblue;width: 40%;float: left;">档次级别</span><select id="add8"  style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;">
                                <option value="">请选择</option>
                                <option value="d001-1">高档</option>
                                <option value="d001-2">中档</option>
                                <option value="d001-3">低档</option>
                            </select></div>
                        </div>
                        <div>
                            <div style="width: 50%; float: left;"><span style="background-color:deepskyblue;width: 40%;float: left;">计量单位</span><input  type="text" style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;" id="add9"></div>
                            <div style="width: 50%; float: left;"><span style="background-color:deepskyblue;width: 40%;float: left;">计量值</span><input  type="text" style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;" id="add10"></div>
                        </div>
                        <div>
                            <div style="width: 50%; float: left;"><span style="background-color:deepskyblue;width: 40%;float: left;"><span style="color: red">*</span>市场单价(元)</span><input  type="text" style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;" id="add11"></div>
                            <div style="width: 50%; float: left;"><span style="background-color:deepskyblue;width: 40%;float: left;"><span style="color: red">*</span>计划成本单价</span><input  type="text" style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;" id="add12"></div>
                        </div>
                    </div>

                    <!--辅助信息-->
                    <div style="margin-top: 5px;" id="fz">
                        <div class="bg-info text-white" style="padding-left: 20px; height:25px;">辅助信息</div>
                        <div>
                            <div style="width: 50%; float: left;"><span style="background-color:deepskyblue;width: 40%;float: left;">保修期</span><input  type="text" style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;" id="add13"></div>
                            <div style="width: 50%; float: left;"><span style="background-color:deepskyblue;width: 40%;float: left;">替代品名称</span><input  type="text" style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;" id="add14"></div>
                        </div>
                        <div>
                            <div style="width: 50%; float: left;"><span style="background-color:deepskyblue;width: 40%;float: left;">替代品编号</span><input  type="text" style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;" id="add15"></div>
                            <div style="width: 50%; float: left;"><span style="background-color:deepskyblue;width: 40%;float: left;">生命周期</span><input  type="text" style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;" id="add16"></div>
                        </div>
                        <div >
                            <div style="width: 50%; float: left;"><span style="background-color:deepskyblue;width: 40%;float: left;">单位</span><input  type="text" style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;" id="add17"></div>
                            <div style="width: 50%; float: left;"><span style="background-color:deepskyblue;width: 40%;float: left;">产品经理:</span><input  type="text" style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;" id="add18"></div>
                        </div>
                        <div >
                            <div style="width: 50%; float: left;"><span style="background-color:deepskyblue;width: 40%;float: left;">供应商集合</span><input  type="text" style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;" id="add19"></div>
                            <div style="width: 50%; float: left;"><span style="background-color:deepskyblue;width: 40%;float: left;">产品描述</span><input  type="text" style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;" id="add20"></div>
                        </div>
                        <div>
                            <div style="width: 50%; float: left;"><span style="background-color:deepskyblue;width: 40%;float: left;">登记人</span><input  type="text" style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;" id="add21"></div>
                            <div style="width: 50%; float: left;"><span style="background-color:deepskyblue;width: 40%;float: left;">登记时间</span><input  type="text" style="border:none;outline: none;background-color: rgba(195, 195, 195, 0.61);float:left;width:calc(100% - 40%);border-bottom: 1px solid white;height: 25px;" id="y"></div>
                        </div>
                        <input type="hidden" id="dfileid" ><input type="hidden" id="fileChangeAmount">
                    </div>

                </div>
            </div>

            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-primary"  onclick="add()">提交</button><button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
            </div>

        </div>
    </div>
</div>
<div>
    <table id="tab"></table>
</div>

<script>
    $(function () {
        $("#tab").bootstrapTable({
            //请求方式  get请求中文会乱码，建议使用post请求
            method: 'post',
            //请求头部的设置
            contentType: 'application/json',
            //url
            url: '/designModule/addqeury',
            //设置交替行样式
            striped: true,
            //初始显示页号
            pageNumber: 1,
            //是否显示分页
            pagination: true,
            //设置是服务端分页还是客户端分页
            sidePagination: 'server',
            //页大小
            pageSize: 5,
            //分页列表
            pageList: [3, 5, 6, 10],
            //上传到服务端的参数
            queryParams: function (params) {
                return {
                    // 计算页号(当前页)
                    pageNumber: (params.offset / params.limit) + 1,
                    // 计算页大小
                    pageSize: params.limit
                };
            },
            // 定义列名
            columns: [
                {title: '产品编号', field: 'productId', align: 'center'},
                {title: '产品名称', field: 'productName', align: 'center'},
                {title: '档次级别', field: 'productClass', align: 'center',
                    formatter: function (value,row,index){
                        if(value=="d001-1"){
                            return "高档";
                        }else if(value="d001-2"){
                            return "中档"
                        }else{
                            return "低档"
                        }
                    }
                },
                {title: 'I级分类', field: 'firstKindName', align: 'center'},
                {title: 'II级分类', field: 'secondKindName', align: 'center'},
                {title: 'III级分类', field: 'thirdKindName', align: 'center'},
                {title: '用途类型', field: 'type', align: 'center',
                    formatter: function (value,row,index){
                        return value=="y001-1"?"商品":"物料"
                    }},
                {title: '产品经理', field: 'responsiblePerson', align: 'center',}
            ]
        })

    })


    function f() {
        $("#tab").bootstrapTable("refresh");
    }
    var alltime;
    function show(){
        $("#qingkong").find("input").val("");
        $("#qingkong").find("select").find("option:first").prop("selected", 'selected');
        var now = new Date().toLocaleString();
         alltime=now;
        $("#y").val(now);
        $.ajax({
            type:'POST',
            url:'/designModule/queryadmin',
            contentType:'application/json;charset=utf-8',
            success:function (data){
                $("#add21").val(data.loginId)
            }
        })
    }
    function add(){
        let dfile={
            productName:$("#add1").val(),
            factoryName:$("#add2").val(),
            firstKindId:$("#add3").val(),
            firstKindName:$("#add3").find("option:selected").text(),
            secondKindId:$("#add4").val(),
            secondKindName:$("#add4").find("option:selected").text(),
            thirdKindId:$("#add5").val(),
            thirdKindName:$("#add5").find("option:selected").text(),
            productNick:$("#add6").val(),
            type:$("#add7").val(),
            productClass:$("#add8").val(),
            personalUnit:$("#add9").val(),
            personalValue:$("#add10").val(),
            listPrice:$("#add11").val(),
            costPrice:$("#add12").val(),
            realCostPrice:$("#add12").val(),
            warranty:$("#add13").val(),
            twinName:$("#add14").val(),
            twinId:$("#add15").val(),
            lifecycle:$("#add16").val(),
            amountUnit:$("#add17").val(),
            responsiblePerson:$("#add18").val(),
            providerGroup:$("#add19").val(),
            productDescribe:$("#add20").val(),
            register:$("#add21").val(),
            registerTime:alltime,
        }
        let d=JSON.stringify(dfile);
        if($("#add1").val()!=null && $("#add1").val()!="" && $("#add3").val()!=null && $("#add3").val()!="" && $("#add4").val()!=null && $("#add4").val()!="" && $("#add5").val()!=null && $("#add5").val()!="" && $("#add11").val()!=null && $("#add11").val()!="" && $("#add12").val()!=null && $("#add12").val()!=""){
            $.ajax({
                type:'POST',
                url:'/designModule/add',
                contentType:'application/json;charset=utf-8',
                data:d,
                success:function (){
                    $("#tab").bootstrapTable("refresh");

                }
            })

            $("#myModal").modal("hide");//隐藏div

        }else {
            alert("有*的不能为空")
        }

    }

</script>
</body>
</html>